extends head

block content
    div#detailForm(style="background-color: #F5F5F5; overflow: scroll; width:  100%; height: 100%")
        div.list-item(style="max-height: 9rem;!important;" v-for="(ord,index) in orderList")
            ul.fl(style=" max-width: 14.5rem; padding: .3rem .5rem;")
                li.title
                    span(style="font-size: .7rem; margin-right:.2rem; ") &nbsp;&nbsp;&nbsp;收件人:
                    | {{ord.name}}
                    span.phone(style="margin-left:8px;") {{ord.phone}}
                    span.number 1公斤
                li.address_1 收件地址:
                    span(style="margin-left: 5px; ") {{ord.address1}}
                li.address_2(style="margin-left: 3.2rem;") {{ord.address2}}
            div.clear
            div(style="border-top: 1px solid #EDEDED;padding: .5rem; max-height: 5rem")
                div.row
                    div.col-xs-6
                        div(style="border-right: 1px solid #EDEDED")
                            img.img-responsive(src="/images/sao@2x.png" style="max-width: 100px;max-height: 100px;")
                        p 扫描快递码
                    div.col-xs-6
                        div
                            img.img-responsive(src="/images/camera@2x.png" style="max-width: 100px;max-height: 100px; ")
                        p 拍照
        div(style="margin-bottom: 5rem;")
        div(style="position:fixed;bottom:0;width: 100%" data-toggle="modal" data-target="#myModal")
            div.weui-btn.choosed(href="javascript:;") 补收差价
        div#myModal.modal.fade(tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 18rem; height: 15rem; display: block;position:absolute;top: 5rem; ")
            div.modal-dialog(style="width: 18rem; height: 15rem; display: block; ")
                div.modal-content(style="width: 17rem; height: 14rem; display: block;border-radius: 5px;")
                    div(style="margin-top: 4rem;margin-left:1rem;font-size: .9rem;font-weight: 150;") 补收金额
                        input(type="number" style="background-color: #F4F4F4;border: 1px solid white;line-height: 2.5rem; ")
                    div.weui-msg__opr-area(style="margin-top: 3rem;")
                        p.weui-btn-area.row
                            a.btn.btn-default.btn-lg(href="javascript:;") 取消
                            a.btn.btn-primary.btn-lg.choosed(href="javascript:;") 确定

block append footer
    script(type='text/javascript').
        $(function () {
            var orderId = #{orderId}

            var detailForm = new Vue({
                el: '#detailForm',
                data: {
                    orderList: []
                },
                methods: {
                    init: function () {
                        zxlib.fpost('/deli/de/getDetails', {
                            orderId: orderId
                        }, function (data) {
                            var dta = data.data
                            for (dt in dta) {
                                var dts = {
                                    id: dta[dt]['id'],
                                    name: dta[dt]['recipientsName'],
                                    packageKilo: dta[dt]['packageKilo'] + '公斤',
                                    address1: dta[dt]['province'] + dta[dt]['city'] + dta[dt]['district'],
                                    address2: dta[dt]['recipientsAddress'],
                                    phone: dta[dt]['recipientsTelephone'],
                                }

                                detailForm.orderList.push(dts);
                            }
                        }, function (data) {
                            console.log(data);
                        });
                    }
                }
            });

            detailForm.init();
        });